<template>

  <div>
    <el-row :gutter="10">
      <el-col :span="12" style="margin-bottom: 10px">
        <div class="card" id="bar" style="height: 450px;"></div>
      </el-col>
      <el-col :span="12" style="margin-bottom: 10px">
        <div class="card" id="line" style="height: 450px;"></div>
      </el-col>
      <el-col :span="12" style="margin-bottom: 10px">
        <div class="card" id="pie" style="height: 450px;"></div>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, reactive } from 'vue';
import request from "@/utils/request.js";



const barOption = {
  title: {
    text: '各部门员工数量'
  },
  tooltip: {},
  legend: {
    data: ['人数']
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '人数',
      type: 'bar',
      data: [],
      itemStyle: {
        color: function (params) {
          // 定义一个颜色数组
          const colors = ['#FFA500', '#FFD700', '#8A2BE2', '#7FFF00', '#FF6347'];
          // 根据数据索引返回对应颜色
          return colors[params.dataIndex % colors.length];

        }
      }
    }
  ]
};

const lineOption = {
  title: {
    text: '近七天发布文章的数量'
  },
  tooltip: {},
  legend: {
    trigger: 'item'
  },
  xAxis: {
    data: []
  },
  yAxis: {},
  series: [
    {
      name: '发布数量',
      type: 'line',
      data: [],
      smooth: true
    }
  ]
};


const pieOption = {
  title: {
    text: '各部门人数统计',
    subtext: '人数',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '人数统计',
      type: 'pie',
      radius: '50%',
      data: [],
      center: ['50%', '50%'],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: '{b}: {@2012} ({d}%)'
      },
    }
  ]
};

// onMounted 表示页面加载完成后执行
onMounted(() => {
  const myChart1 = echarts.init(document.getElementById('bar'))
  request.get('/barData').then(res => {
    barOption.xAxis.data = res.data.department
    barOption.series[0].data = res.data.count
    myChart1.setOption(barOption);
  })

  const myChart2 = echarts.init(document.getElementById('line'))
  request.get('/lineData').then(res => {
    lineOption.xAxis.data = res.data.date
    lineOption.series[0].data = res.data.count
    myChart2.setOption(lineOption);
  })

  const myChart3 = echarts.init(document.getElementById('pie'))
  request.get('/pieData').then(res => {
    pieOption.series[0].data = res.data
    myChart3.setOption(pieOption);
    console.log(res.data)
  })
})

</script>
